<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lcy">
    <script src="../jquery-3.1.1.js"></script>
    <title></title>
    <style>
        body{
            /*表示文字大小12px 1.5倍的行间距 arial是一种字体*/
            font: 12px/1.5 arial;
            color: #666;
        }
        ul,p{
            margin: 0;
            padding: 0;
        }
        #star{
            width: 600px;
            margin: 10px auto;
            position: relative;
        }
        #star span,#star ul{
            float: left;
            margin: 0 5px;
            /*background: red;   */
        }
        #star li{
            list-style-type: none;
            float: left;
            width: 24px;
            height: 24px;
            cursor: pointer;
            background-image: url(star.png);
            background-repeat: no-repeat;
        }
        #star li.on{
            background-position: 0 -28px;
        } 
        #star p{
            width: 160px;
            position: absolute;
            top: 20px;
            
            /*background-color: skyblue;*/
        }
        #star p em{
            display: block;
            font-style: normal;
            color: #f60;
        }
        strong{
            color: #f60;
        }
    </style>
</head>
<body>
    <div id="star">
        <span>点击星星评分</span>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <!--<li></li>-->
        </ul>
        <!--显示最终的评分结果-->
        <span class="hou"></span>
        <!--显示评分及评语-->
        <p></p>
    </div>
</body>
</html>
<script>
    // 当页面内容和图片加载完毕时再让其显示
    $(function(){
        var msg=[
            "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
            "不满意|部分有破损，与卖家描述的不符，不满意",
            "一般|质量一般，没有卖家描述的那么好",
            "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
            "非常满意|质量非常好，与卖家描述的完全一致，非常满意"

        ]
        var star=0;
        $('li').hover(function(){
            // console.log($(this).prevAll());
            $(this).addClass('on');
            $(this).prevAll().addClass('on');
            $(this).nextAll().removeClass('on');
            $('p').html('<strong>'+($(this).index()+1+'分 </strong>')+msg[$(this).index()].split('|')[0]+'<br>'+msg[$(this).index()].split('|')[1]);
            // $('p').css('left',$(this).offset().left+'px');
            $('p').css('left',$(this).offset().left-$('ul').offset().left+'px');
        },function(){
            $(this).removeClass('on');
            $(this).prevAll().removeClass('on');
            $('p').html('');
            // star.style.backgroundPosition='0 -28px';
        })

       $('li').click(function(){
           star=$(this).index()+1;
           $('p').html('');
           $(this).addClass('on');
           $(this).prevAll().addClass('on');
           $('.hou').html('<strong>'+($(this).index()+1)+'分</strong>('+msg[$(this).index()].split('|')[1]+')')
       })
        
    })
    
    
</script>